<template>
  <div>
      <!-- vue2 响应式的原理是什么 -->
      <!-- js 的一个内置方法 Object.defineProperty() 数据劫持 就是vue 底层通过这个方法来实现的vue 的数据的响应式 重点！！！！！！！！ -->
      <!-- 这个方法也有缺点 -->
      <!-- 缺点就是 数组 我们通过下标修改数组时页面不会发生响应式变化 -->
      <!-- 解决1 使用数组的内置方法 -->
      <!-- 解决2 使用vue 提供的内置方法 $set -->

      <!-- 对象新增属性或者删除属性时 页面不会发生响应式变化 -->
      <!-- 解决 使用 vue内置的$set 或者 $delete -->
      <ul>
          <li v-for="(item,index) in arr" :key="index">{{item}}</li>
          <button @click="editFun">修改</button>
      </ul>
      <h2>{{obj}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[100,200,300,400],
            obj:{
                one:100,
                two:200,
                three:300
            }
        }
    },
    methods:{
        editFun(){
            // this.$set("要操作的数组或者对象","数组的下标/对象的key","新值")
            // this.$set(this.arr,1,20000)
            // this.obj['one'] = 10000;

            // this.obj['four'] = 40000;
            this.$set(this.obj,'four',4000)
            
            // delete this.obj.two;
            this.$delete(this.obj,'two')

            console.log(this.obj);


            // this.arr[1] = 2000; // 这里用的是下标
            // this.arr.push(500)
            // this.arr.splice(1,2,3000)
        }
    }
}
</script>

<style>

</style>